<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 块级元素 -->
     <!-- 块元素会在页面中独占一行，自上向下垂直排列 -->
      <!-- 可以设置width、height、margin、padding、border等属性 -->
       <!-- 一般块级元素可以包含行内元素和其他块级元素 -->
        <!-- 常见的有：div,form,h1-h6,p,ul,ol,table等 -->
        <div>
            <p>块元素</p>

        </div>
        <form >
            <tr>
                <td>单元格</td> 
            </tr>
        </form>
        <h1>标题1</h1>
        <ul>
            <li>水果</li>
            <li>蔬菜</li>
        </ul>
        <!--内联元素（行内元素） -->
<!-- 行内元素不会独占一行，只会占自身的大小 -->
 <!-- 不能设置width、height、margin、padding、border等属性，设置了也是无效的 -->
  <!-- 一般行内元素只能包含文本或其他行内元素不包含块级元素 -->
   <!-- 常见的有：a,span,img,input,button等 -->
    <a href="">超链接</a>
    <span>文本</span>
    <img src="./1.jpg" alt="">
    <input type="text">
    <button>按钮</button>
    <!-- 行内块级元素：不换行，能够识别宽高 -->
     <!-- button，img，input等元素可以设置宽高，但是不会独占一行 -->
     <img src="./1.jpg" alt="">
     <input type="text">
     <button>按钮</button> 
</body>
</html>